<template>
    <div>
      <x-header title="添加收货地址" style="background-color: #33bb99;">
        <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      </x-header>
      <group>
        <x-address @on-hide="logHide" @on-show="logShow" :title="title" v-model="value" :list="addressData"
                 @on-shadow-change="onShadowChange" placeholder="请选择地区" inline-desc="" :show.sync="showAddress"></x-address>
        <x-input title="详细地址" v-model="editInfo.detail_address"></x-input>
        <x-input title="收货人姓名" v-model="editInfo.contacts"></x-input>
        <x-input title="收货人手机号" v-model="editInfo.mobile"></x-input>
      </group>

      <br><br>
      <box gap="0 15px"><x-button type="primary" style="background: #33bb99;border-color: #33bb99;" @click.native="add">确认添加</x-button></box>
    </div>
</template>

<script>
  import { Group, ChinaAddressV4Data, Value2nameFilter as value2name } from 'vux'
    export default {
        name: "addressLink",
      components:{
        Group,
      },
      data(){
          return {
            editInfo: {
              "id": "",
              "provinces_id": "",
              "cities_id": "",
              "areas_id": "",
              "detail_address": "",
              "contacts": "",
              "mobile": "",
              "purchasers_id": "",
              "is_default": "0"
            },
            title: '选择地区',
            value_0_1: [],
            value: [],
            title2: '设置值',
            value2: ['天津市', '市辖区', '和平区'],
            value3: ['广东省', '中山市', '--'],
            addressData: ChinaAddressV4Data,
            value4: [],
            value5: ['广东省', '深圳 市', '南山区'],
            showAddress: false,
          }
      },
      methods:{
        // 信息提示
        msg(str){
          this.$vux.toast.show({
            type: 'text',
            text: str,
            position: 'default',
            time: 800,
          });
        },
        back(){
          this.$router.push('/project1/view3/address');
        },
        getP(){
          this.$vux.loading.show();
          this.config1.post('/common/address/getProvinces', {}).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              this.pArr = res.data.list;
              // if(this.editInfo.provinces_id){this.provinceid=this.editInfo.provinces_id}
            }else{
              this.msg(this.config1.handleError(res.data));
            }
          })
        },
        getC(){
          if(!this.provinceid) return;
          this.$vux.loading.show();
          this.config1.post('/common/address/getCitis', {
            provinceid: this.provinceid,
          }).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              this.cArr = res.data.list;
              // if(this.editInfo.cities_id){this.cityid=this.editInfo.cities_id}
            }else{
              this.msg(this.config1.handleError(res.data));
            }
          })
        },
        getA(){
          if(!this.cityid) return;
          this.$vux.loading.show();
          this.config1.post('/common/address/getAreas', {
            cityid: this.cityid,
          }).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              this.aArr = res.data.list;
              // if(this.editInfo.areas_id){this.areaid=this.editInfo.areas_id}
            }else{
              this.msg(this.config1.handleError(res.data));
            }
          })
        },
        // 完成
        getD(){
          if(this.areaid){
            this.$emit('addressChange', {provinceid: this.provinceid, cityid: this.cityid, areaid: this.areaid,});
          }
        },
        // 返显
        show(obj){
          this.provinceid = obj.provinces_id || '';
          this.getC();
          setTimeout(()=>{
            this.cityid = obj.cities_id || '';
            this.getA();
          }, 200);
          setTimeout(()=>{
            this.areaid = obj.areas_id || '';
          }, 400);
        },
      //  =====================================================================
        doShowAddress () {
          this.showAddress = true
          setTimeout(() => {
            this.showAddress = false
          }, 2000)
        },
        onShadowChange (ids, names) {
          // console.log(ids, names);
        },
        changeData () {
          this.value2 = ['430000', '430400', '430407']
        },
        changeDataByLabels () {
          this.value2 = ['广东省', '广州市', '天河区']
        },
        changeDataByLabels2 () {
          this.value2 = ['广东省', '中山市', '--']
        },
        getName (value) {
          return value2name(value, ChinaAddressV4Data)
        },
        logHide (str) {
          // console.log('on-hide', str)
        },
        logShow (str) {
          // console.log('on-show')
        },
        valid(){
          if(!this.value[2]){
            this.msg('请选择完整的地址');
            return false;
          }
          if(!this.editInfo.detail_address){
            this.msg('请填写详细地址');
            return false;
          }
          if(!this.editInfo.contacts){
            this.msg('请填写联系人');
            return false;
          }
          if(!this.public.isMobile(this.editInfo.mobile)){
            this.msg('请填写正确的联系电话');
            return false;
          }
          return true;
        },
        // 添加地址
        add(){
          if(!this.valid()) return;
          let obj = {
            'purchasersAddress.id': this.editInfo.id,
            'purchasersAddress.provinces_id': this.value[0],
            'purchasersAddress.cities_id': this.value[1],
            'purchasersAddress.areas_id': this.value[2],
            'purchasersAddress.detail_address': this.editInfo.detail_address,
            'purchasersAddress.contacts': this.editInfo.contacts,
            'purchasersAddress.mobile': this.editInfo.mobile,
            'isDefault': this.editInfo.is_default,
          };
          // let url = this.editInfo.id?'/purchasers/app/purchasersaddress/edit':'/purchasers/purchasersaddress/add';
          this.$vux.loading.show();
          this.config1.post('/purchasers/app/purchasersaddress/add', obj).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              this.msg(res.data.message);
              this.$router.back();
            }else{
              this.msg(this.config1.handleError(res.data));
            }
          })
        }
      },
      mounted(){
          // this.getP();
      }
    }
</script>

<style scoped>
@import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
</style>
